網頁的美術小天使--CSS

2023 iThome 鐵人賽

DAY 3

Modern Web

蛤架一個網站好貴喔，那我自己來系列第 3 篇

15th鐵人賽

anngood

團隊好想放假大學

2023-09-18 21:28:45

240 瀏覽

分享至

大家好，今天我們要來介紹更多的HTML基礎語法。
昨天講到了如何寫出Hello World!，今天我們來試著調整字體吧~

CSS是什麼?

首先，我們要來了解CSS到底是什麼。
CSS是一種控制網頁樣式和布局的標記語言，簡單來說就是網頁中的美術小天使，讓原本單調的網頁增添了美感，是網頁設計中不可或缺的東西。
而CSS又分為內部及外部，內部CSS是直接寫在HTML文件內，外部CSS是額外新增一個檔案再連結。
接下來我們來實際練習一次(內部):

<!DOCTYPE html>
<html>
<head>
    <title>我的第一個網頁</title>
    <style>
        p{
            color:red;
            font-size:100px;
        }
    </style>
</head>
<body>
    <h1>
        <p>Hello world!</p>
    </h1>
</body>
</html>

首先，CSS是要寫在<style>標籤內的，而上面的p{}代表選擇器，只要出現在<p></p>範圍內的文字，都要套用選擇器裡面的設定，例如上面的顏色與大小。
而選擇器還有幾個不同的種類，常見的有基礎選擇器與組合選擇器，例如CLASS選擇器和ID選擇器是屬於基礎選擇器。
他們比<p>來的更為具體，
CLASS的選擇器: .classname
ID選擇器: #idname

.important {
    font-size:20px ;
}

所有具有important的元素都會被套用此設定。

#header {
    background-color: #ffffff;
}

所有具有header ID的元素都會被套用此設定。

而外部CSS是將 CSS 保存在獨立的 .css 文件中，然後在 HTML 文件中使用 <link> 元素引用它。
接下來我們來實際練習一次(外部):
首先創一個.css檔

body {
    font-size:20px;
    background-color: #f0f0f0;
}
h1 {
    color:red;
}

然後回到HTML裡面加入<link>來連結我們的.css檔

<!DOCTYPE html>
<html>
<head>
    <title>我的第一個網頁</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

其中
rel="stylesheet"：這個屬性指定了連接的資源的關聯類型。

type="text/css"：這個屬性指定了連接的資源的MIME類型（媒體類型）。在這裡，它告訴瀏覽器該檔案是一個CSS文件。

href="ann.css"：這是連接的資源的URL或文件路徑。在這個例子中，它指定了一個名為ann.css的檔案。

結果如下